<template>
  <div class="shopcar">
    <div class="content" @click="toggleList">
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="logo" :class="{'highligiht':totalCount>0}">
            <span class="icon-shopping_cart" :class="{'highligiht':totalCount>0}"></span>
          </div>
          <div class="num" v-if="totalCount>0">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'highligiht':totalCount>0}">￥{{totalPrice}}</div>
        <div class="desc">另需配送费￥{{deliveryPrice}}元</div>
      </div>
      <div class="content-right">
        <div class="pay" @click.stop.prevent="pay()" :class="classSty">
          <!--<router-link to="/shopcarplay">{{payDesc}}</router-link>-->
          {{payDesc}}

        </div>
      </div>
    </div>
    <transition name="fold">
    <div class="shopcar-list" v-show="listShow">
      <div class="list-header">
        <h1 class="title">购物车</h1>
        <span class="empty" @click="empty()">清空</span>
      </div>
      <div class="list-content"  ref="cartScroll">
        <ul>
          <li class="food" v-for="food in selectFoods">
            <span class="name">{{food.name}}</span>
            <div class="price">
              <span>￥{{food.price*food.count}}</span>
            </div>
            <div class="cartcontral-wrapper">
              <carcontrol :food="food"></carcontrol>
            </div>
          </li>
        </ul>
      </div>
    </div>
    </transition>
    <transition name="fade">
      <div class="list-mask" @click="hiddMask()" v-show="listShow"></div>
    </transition>
  </div>
</template>

<script>
  import carcontrol from '../carcontrol/carcontrol.vue'
  import BScroll from 'better-scroll';//better scroll 引入初始化
//  import { MessageBox } from 'element-ui';
  import { MessageBox } from 'mint-ui';
  import { Toast } from 'mint-ui';

  export default{
  components:{
      carcontrol
  },
  data(){
      return {
        fold:true
      }
  },
  props:{
        selectFoods:{//选择商品的数组
          type:Array,
          default(){
              return[]
          }
        },
      deliveryPrice: {
            type:Number,
            default:0
        },
      minPrice: {
        type:Number,
        default:0
      }
    },
      computed:{
      listShow(){
          if(!this.totalCount){
            this.fold=true;
            return false
          }
          let show = !this.fold;
          if(show){
              this.$nextTick(()=>{
                  if(!this.Scroll) {
                    this.Scroll = new BScroll(this.$refs.cartScroll, {
                      click: true
                    })
                  }else{
                      this.Scroll.refresh()
                  }

              })
          }
          return show

      },
          totalPrice(){
              let total = 0
               this.selectFoods.forEach((food)=>{
                  total+=food.price*food.count
               });
              return total
          },
        totalCount(){
          let count = 0;
          this.selectFoods.forEach((food) => {
            count += food.count
          });
          return count
        },
        payDesc() {
          if(this.totalPrice===0){
              return `￥${this.minPrice}起送`
          }else if(this.totalPrice<this.minPrice){
              let  diffrice = this.minPrice - this.totalPrice
            return `还差￥${diffrice}元起送`
          }else{
              return '去结算'
          }
        },
        classSty() {
            if(this.totalPrice<this.minPrice){
                return 'not-enough'
            }else{
                return 'enough'
            }
        }
      },
    methods:{
      toggleList(){

        if(!this.totalCount){
            return
        }
        this.fold=!this.fold

      },
      empty(){
          this.selectFoods.forEach((food)=>{
              food.count=0
          })
      },
      hiddMask(){
          this.fold=true
      },
      pay(){
          if(this.totalPrice<this.minPrice){
              return false;
          }
//        MessageBox(`需要支付${this.totalPrice}元`)
//        MessageBox({
//          title: '还吃吗？越吃越胖！',
//          message: `需要支付${this.totalPrice}元`,
//          showCancelButton: true,
//          closeOnClickModal:false,
//
//        })
        MessageBox.confirm(`需要支付${this.totalPrice}元`, '越吃越胖').then(
            action=>{
          this.$router.push({path:'/shopcarplay'})
//          console.log(9);
        },
           action=>{
             Toast('取消支付了哦');
        });







      }


    }

}
</script>

<style lang="scss">
.shopcar {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #141d27;
  height: 48px;
  z-index: 55;

.content {
    display: flex;
    height:100%;
    font-size:0;

      .content-left {
        height: 100%;
        flex: 1;
        display: inline-block;
      .logo-wrapper{
          display: inline-block;
          width: 56px;
          height: 56px;
          background-color: #141d27;
          position: relative;
          top: -10px;
          margin:0 12px;
          border-radius: 50%;
          padding:6px;
          box-sizing: border-box;
          vertical-align: top;
        .num{
          position: absolute;
          top: 0;
          right: 0;
          width: 24px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          border-radius: 16px;
          background-color: rgb(240,20,20);
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
          font-size: 9px;
          font-weight: 400;
          color: #fff;
        }


          .logo{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #2b343c;
            text-align: center;
            &.highligiht{
               background-color: rgb(0,160,220);
             }
            .icon-shopping_cart{
              font-size: 24px;
              line-height: 44px;
              color: rgba(255,255,255,0.4);
              &.highligiht{
                color: #fff;
               }
            }
          }
        }
        .price{
          display: inline-block;
          font-size: 16px;
          font-weight:700;
          line-height: 24px;
          color: rgba(255,255,255,0.4);
          margin-top: 12px;
          padding-right: 12px;
          border-right: 1px solid rgba(255,255,255,0.1);
          &.highligiht{
            color: #fff;
           }
        }
        .desc{
          display: inline-block;
          font-size: 12px;
          color: rgba(255,255,255,0.4);
          margin-top: 12px;
          padding-left: 12px;
          font-weight:200;
        }
      }
      .content-right {
        flex: 0 0 105px;
        width: 105px;
        height: 100%;
        line-height: 48px;
        text-align: center;
        .pay {
          font-size: 12px;
          font-weight:700;
          color: rgba(255,255,255,0.4);
          &.not-enough{
             background-color: #2b343c;
             color: #fff;

           }
           &.enough{
              background-color: #00b43c;
              color: #fff;
            }

        }
      }

    }
    .shopcar-list{
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      transform: translate3d(0,-100%,0);
      &.fold-enter-active, &.fold-leave-active{
        transition: all 0.3s linear;
       }
       &.fold-enter, &.fold-leave-to{

        transform: translate3d(0,0,0);
        }

        .list-header{
          height: 40px;
          line-height:40px;
          padding: 0 18px;
          background: #f3f5f7;
          border-bottom: 1px solid rgba(7, 17, 27, 0.1);
          .title{
            float: left;
            font-size: 14px;
            font-weight:200;
            color: rgb(7,17,27);
          }
          .empty{
            float: right;
            font-size: 12px;
            line-height:40px;
            color: rgb(0,160,220);
          }
        }
        .list-content{
          padding:0 18px;
          line-height: 24px;
          max-height:217px;
          overflow: hidden;
          background: #fff;
        .food{
          padding:12px 0;
          position:relative;
          box-sizing: border-box;
          border-bottom: 1px solid rgba(7, 17, 27, 0.1);

      .name{
            font-size:14px;
            color: rgb(7,17,27);
            line-height: 24px;
          }
          }

          .price{
            position: absolute;
            right: 90px;
            bottom: 12px;
            line-height: 24px;
            font-size: 14px;
            font-weight: 700;
            color: rgb(240, 20, 20);
          }
          .cartcontral-wrapper{
            position: absolute;
            right: 0;
            bottom: -4px;
          }

        }



    }
.list-mask{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index:-2;
  backdrop-filter:blur(10px);
  background-color: rgba(7,17,27,0.6);

  &.fade-enter-active, &.fade-leave-active{
transition: all .5s;
}
  &.fade-enter, &.fade-leave-to{
  opacity: 0;
  background-color: rgba(7,17,27,0);
  }
}
}
</style>
